<template>
	<view class="content">
		<view class="avatorWrapper">
			<view class="avator">
				<image class="img" src="../../static/haircut.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="form">
			<view class="form-group">
				<input class="input" type="text" v-model="formData.username" placeholder="用户名" />
				<text v-if="errors.username" class="error">{{ errors.username }}</text>
			</view>
			<view class="form-group">
				<input class="input" type="password" v-model="formData.password" placeholder="请输入密码" />
				<text v-if="errors.password" class="error">{{ errors.password }}</text>
			</view>
			<view class="loginBtn" @click="submit">
				<text class="btnValue">登录</text>
			</view>
		</view>

		<view class="forgotBtn">
			<navigator url="/pages/login/register"><text>- 注册 -</text></navigator>
		</view>
	</view>
</template>

<script>
	import { loginService } from '../../services/user';
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				errors: {
					username: '',
					password: ''
				}
			}
		},
		methods: {
			validateForm() {
				let isValid = true;
				this.errors.username = '';
				this.errors.password = '';

				if (!this.formData.username) {
					this.errors.username = '请输入用户名';
					isValid = false;
				}

				if (!this.formData.password) {
					this.errors.password = '请输入密码';
					isValid = false;
				}
				return isValid;
			},
			async submit() {
				try {
					const res = await loginService(this.formData.username, this.formData.password);
					const token = res.tokenStr;
					this.$store.commit('user/setToken', token);
					uni.showToast({
						icon: 'success',
						title: '登录成功'
					});
					
					console.log("登录成功存储：",JSON.stringify(res))
					localStorage.setItem("userinfo",JSON.stringify(res))
					
					// 登录成功后跳转到首页
					uni.switchTab({
						url: '/pages/index/index'
					});
				} catch (error) {
					console.log(error)
					uni.showToast({
						icon: 'none',
						title: '登录失败，请检查您的用户名和密码'
					});
				}
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
	}

	.avatorWrapper {
		margin-top: 16px;
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.avator {
		width: 300upx;
		height: 300upx;
		overflow: hidden;
	}

	.avator .img {
		width: 100%;
	}

	.form {
		padding: 0 100upx;
		margin-top: 40px;
	}

	.form-group {
		margin-bottom: 20px;
	}

	.input {
		flex: 1;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		padding: 10px;
	}

	.error {
		color: red;
		font-size: 12px;
		margin-top: 5px;
	}

	.loginBtn {
		width: 100%;
		height: 80upx;
		background: #a3a3a3;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loginBtn .btnValue {
		color: white;
	}

	.forgotBtn {
		text-align: center;
		color: #8d8d8d;
		font-size: 15px;
		margin-top: 20px;
	}
</style>